// components/test3/test3.js
Component({

  options: {
    // 制定所有_开头的数据字段为纯数据字段
    pureDataPattern: /^_/
  },

  /**
   * 组件的属性列表
   */
  properties: {

  },

  /**
   * 组件的初始数据
   */
  data: {
    _rgb: { // _rgb的颜色值对象
      r: 0,
      g: 0,
      b: 0
    },
    fullColor: '0, 0, 0', // 根据rgb对象的三个属性，动态计算fullcolor的值

    a: true, // 普通数据字段
    _b: true // 纯数据字段

  },

  /**
   * 组件的方法列表
   */
  methods: {
    changeR() {
      this.setData({
        '_rgb.r': this.data._rgb.r + 5 > 255 ? 255: this.data._rgb.r + 5
      })
    },
    changeG() {
      this.setData({
        '_rgb.g': this.data._rgb.g + 5 > 255 ? 255: this.data._rgb.g + 5
      })
    },
    changeB() {
      this.setData({
        '_rgb.b': this.data._rgb.b + 5 > 255 ? 255: this.data._rgb.b + 5
      })
    },
    _randomColor() {
      this.setData({
        _rgb: {
          r: Math.floor(Math.random() * 256),
          g: Math.floor(Math.random() * 256),
          b: Math.floor(Math.random() * 256)
        }
      })
    }
  },

  observers: {
    // 监听_rgb对象上r,g,b三个子属性的变化
    // '_rgb.r, _rgb.g, _rgb.b': function(r, g, b) {
    //   this.setData({
    //     // 为data中的fullColor重新赋值
    //     fullColor: `${r}, ${g}, ${b}`
    //   })
    // }
    // 使用通配符 ** 监听对象上所有属性的变化
    '_rgb.**': function (obj) {
        this.setData({
          fullColor: `${obj.r}, ${obj.g}, ${obj.b}`
        })
    }



  },

  pageLifetimes: {
    // 组件所在的页面被展示时，立即调用_randomColor生成随机颜色值
    show: function () {
      this._randomColor()
    }
  }


})